<template>
	<!-- 全真模拟-在线试卷【更多】 -->
	<view class="online-paper pd-30">
		<my-switch-navbar :activeTab.sync="activeTab" :tabName="tabName"></my-switch-navbar>
		<!-- <my-scroll-view scroll-y refresher-enabled :init="init"> -->
		<view class="container" v-show="activeTab === 0">
			<my-paper-list-item @start-exam="startUserPaper($event)" :key="paper.paperid" v-for="paper in list" :item="paper"></my-paper-list-item>
		</view>
		<view class="container" v-show="activeTab === 1">
			<my-paper-list-item :key="paper.paperid" v-for="paper in list" @click.native="viewResult(paper, 'startUserPaper', false)" :item="paper"></my-paper-list-item>
		</view>
		<!-- </my-scroll-view> -->
		<u-loadmore v-show="isShowLoadMore" icon-type="flower" bg-color="#f5f5f5" :status="status" @loadmore="getPageData()" :margin-top="20" />
		<my-empty v-if="isEmpty"></my-empty>
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';
export default {
	mixins: [exam],
	data() {
		return {
			tabName: ['未考试卷', '已考试卷'],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#ef4c3a'
					}
				}
			],
			paperTypes: ['notFinishedPaper', 'finishedPaper'],
			finishedPaper: null,
			notFinishedPaper: null,
			activeTab: 0
		};
	},
	onLoad() {
		const obj = {
			list: [],
			pageNo: 1,
			status: 'loadmore',
			isLastPage: false
		};
		this.finishedPaper = this.$u.deepClone(obj);
		this.notFinishedPaper = this.$u.deepClone(obj);
		this.init();
	},
	onReachBottom() {
		if (this.status !== 'nomore' && !this.isLastPage) this.getPageData();
	},
	watch: {
		activeTab(newValue, oldValue) {
			!this.isLastPage && this.getPageData();
		}
	},
	computed: {
		list: {
			get() {
				return this[this.currentPaperType].list.length ? this[this.currentPaperType].list : [];
			},
			set(list) {
				this[this.currentPaperType].list = list;
			}
		},
		currentPaperType() {
			return this.paperTypes[this.activeTab];
		},
		status: {
			get() {
				return this[this.currentPaperType].status;
			},
			set(v) {
				this[this.currentPaperType].status = v;
			}
		},
		pageNo: {
			get() {
				return this[this.currentPaperType].pageNo;
			},
			set(v) {
				this[this.currentPaperType].pageNo = v;
			}
		},
		isLastPage: {
			get() {
				return this[this.currentPaperType].isLastPage;
			},
			set(v) {
				this[this.currentPaperType].isLastPage = v;
			}
		}
	},
	methods: {
		init() {
			this.list = [];
			this.isLastPage = false;
			this.pageNo = 1;
			this.status = 'loadmore';
			return this.getPageData();
		},
		getPageData() {
			this.status = 'loading';
			return new Promise((resolve, reject) => {
				// 2已完成 3未完成
				const params = [3, 2];
				this.request
					.post(`/app/proposition/groupPaperList`, {
						papertype: 4,
						type: params[this.activeTab],
						pageNo: this.pageNo
					})
					.then(res => {
						const { isLastPage } = res;
						this.list = this.list.concat(res.list);
						this.isLastPage = isLastPage;
						if (isLastPage) this.status = 'nomore';
						else this.pageNo++;
						resolve();
					})
					.catch(reject)
					.finally(() => {
						this.status !== 'nomore' && (this.status = 'loadmore');
					});
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.uni-swipe {
	margin-bottom: 20upx;
}
.uni-swipe .paper-item {
	margin-bottom: 0;
}
.uni-swipe {
	margin-bottom: 20 upx;
}
</style>
